<template>
  <div class="workbench-top10list">
    <div class="workbench-title">
      {{$t('workbench.ranking')}}
      <div class="fr top-choose">
        <span class="top-day" ds-attr='day' v-bind:class = "{top_active: activeSlip=='day'}" v-on:click.stop="active('day')">{{$t('workbench.day')}}</span>
        <span class="top-month" ds-attr='month' v-bind:class = "{top_active: activeSlip=='month'}" v-on:click.stop="active('month')">{{$t('workbench.month')}}</span>
      </div>
    </div>
    <div class="workbench-top10list-content">
      <table class = "rank table">
        <tr><td><i class="icon iconfont icon-NO index"></i></td></tr>
        <tr><td><i class="icon iconfont icon-NO1 index"></i></td></tr>
        <tr><td><i class="icon iconfont icon-NO2 index"></i></td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
      </table>
      <el-row style="width: 100%">
        <div class="workbench-top10list-cdr common-styl">
          <table class="table">
            <thead>
              <tr>
                <td class="crown">
                  <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.callAccess')" placement="right" v-once>
                    <div class="icon iconfont icon-gongzuotaiwangguan top10list-cdr-icon icon-text">
                      <i class="icon iconfont icon-dianhuahuru"></i>
                    </div>
                  </el-tooltip>
              </td>
              <td></td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(list,index) in currentData.cdrTop10" :key="index">
              <td class="work_name   1111" :ref="index+ '0a'">
                <el-tooltip class="item" v-if="toshow[0]&&!toshow[0][index]"     effect="dark" :content="list.name" placement="bottom">
                  <div class="ppp">{{list.name}}</div>
                </el-tooltip>
                <span v-else>{{list.name}}</span>
              </td>
              <td class="num">{{list.score}}</td>
            </tr>
          </tbody>
          </table>
        </div>
        <div class="workbench-top10list-cdr common-styl">
          <table class="table">
            <thead>
            <tr>
              <td class="crown">
                <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.callAccessOut')" placement="right" v-once>
                  <div class="icon iconfont icon-gongzuotaiwangguan top10list-cdr-icon icon-text">
                    <i class="icon iconfont icon-waihutubiao"></i>
                  </div>
                </el-tooltip>
              </td>
              <td></td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(list,index) in currentData.callOutTop10" :key="index">
              <td class="work_name" :ref="index+ '1a'">
                <el-tooltip class="item" v-if="toshow[1]&&!toshow[1][index]"   effect="dark" :content="list.name" placement="bottom">
                  <div class="ppp">{{list.name}}</div>
                </el-tooltip>
                <span v-else>{{list.name}}</span>
              </td>
              <td class="num">{{list.score}}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="workbench-top10list-mail common-styl">
          <table class="table">
            <thead>
              <tr>
                <td class="crown">
                  <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.emailAccess')" placement="right" v-once>
                    <div class="icon iconfont icon-gongzuotaiwangguan top10list-mail-icon icon-text">
                      <i class="icon iconfont">&#xe650;</i>
                    </div>
                  </el-tooltip>
              </td>
              <td></td>
            </tr>
            </thead>
            <tbody>
              <tr  v-for="(list,index) in currentData.mailTop10" :key="index">
              <td class="work_name" :ref="index+ '2a'">
                <el-tooltip class="item" v-if="toshow[2]&&!toshow[2][index]"   effect="dark" :content="list.name" placement="bottom">
                  <div class="ppp">{{list.name}}</div>
                </el-tooltip>
                <span v-else>{{list.name}}</span>
              </td>
                <td class="num">{{list.score}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="workbench-top10list-im common-styl">
          <table class="table">
            <thead>
              <tr>
                <td class="crown">
                  <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.webChatAccess')" placement="right" v-once>
                    <div class="icon iconfont icon-gongzuotaiwangguan top10list-im-icon icon-text">
                      <i class="icon iconfont">&#xe655;</i>
                    </div>
                  </el-tooltip>
              </td>
              <td></td>
            </tr>
            </thead>
            <tbody>
              <tr v-for="(list,index) in currentData.imTop10" :key="index">
              <td class="work_name" :ref="index+ '3a'">
                <el-tooltip class="item" v-if="toshow[3]&&!toshow[3][index]"    effect="dark" :content="list.name" placement="bottom">
                  <div class="ppp">{{list.name}}</div>
                </el-tooltip>
                <span v-else>{{list.name}}</span>
              </td>
                <td class="num">{{list.score}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="workbench-top10list-bus common-styl">
          <table class="table">
            <thead>
              <tr>
                <td class="crown">
                  <el-tooltip class="item" effect="dark" transition="" :content="$t('workbench.businessSum')" placement="right" v-once>
                    <div class="icon iconfont icon-gongzuotaiwangguan top10list-bus-icon icon-text">
                      <i class="icon iconfont">&#xe63d;</i>
                    </div>
                  </el-tooltip>
              </td>
              <td></td>
            </tr>
            </thead>
            <tbody>
              <tr v-for="(list,index) in currentData.businessTop10" :key="index">
               <td class="work_name" :ref="index+ '4a'">
                <el-tooltip class="item" v-if="toshow[4]&&!toshow[4][index]"    effect="dark" :content="list.name" placement="bottom">
                  <div class="ppp">{{list.name}}</div>
                </el-tooltip>
                <span v-else>{{list.name}}</span>
              </td>
               <td class="num">{{list.score}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
  //    import Workbench from './components/workbench/workbench.vue'
  import { filter } from 'lodash'
  export default {
    name: 'workbenchtop10list',
    props: {
      todayData: Object
    },
    data () {
      return {
        activeSlip: 'day',
        toshow:[],
        offset:[],
        monthData:{},
        flag:true
      }
    },
    computed: {
      currentData () {
        setTimeout(()=>{
          this.isOmit()
        },100)
        if (this.activeSlip === 'day') {
          return this.todayData
        } else {
          return this.monthData || {}
        }
      }
    },
    methods: {
      active (date) {
        if (date === 'day') {
          this.activeSlip = 'day'
        } else {
          this.activeSlip = 'month'
          if(this.flag) {
            this.getMonthData()
          }
        }
      },
      getMonthData(){
        this.$store.dispatch('queryAgentMultiChannelMonthDownData').then(res => {
          if(res && res.success) {
            this.$store.dispatch('getCache', {type: 'agents'}).then(agents => {
              res.top10list.monthTop10.imTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.mailTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.cdrTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.callOutTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.businessTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              this.$set(this,'monthData',res.top10list.monthTop10)
              // 没有的补空
              for (let n in this.monthData) {
                let length = this.monthData[n].length
                for (let m = 0; m < 10 - length; m++) {
                  this.monthData[n].push({name: '- -', score: '- -'})
                }
              }
            })
            this.flag = false
          } else {
            this.monthData = {}
          }
        })
      },
      isOmit () {
        this.$nextTick(()=>{
          let arr = []
          let arr2 = []
          let dataname = ['cdrTop10','callOutTop10','mailTop10','imTop10','businessTop10']
          for(let m=0;m<dataname.length;m++){
            arr[m]=[]
            arr2[m]=[]
            for(let i=0;i<10;i++){
              let ref = i +""+ m + "a"
              arr2[m][i] = 0
              let name = this.currentData[dataname[m]][i]
              if(name!=='- -'&&this.$refs[ref]){
                let dom = this.$refs[ref][0]
                if (dom) {
                  let children = dom.childNodes[0]
                  arr[m][i]=(dom.offsetWidth>children.offsetWidth)
                  arr2[m][i] =(dom.offsetWidth-children.offsetWidth)
                }
              }else{
                arr[m][i] = false
              }
            }
          }
          this.$set(this,'toshow',arr)
          // this.$set(this,'offset',arr2)
        })
      },
      load(){
        this.flag = true
        if(this.activeSlip == 'month'){
          if (this.flag) {
           this.getMonthData()
          }
        }
      }
    }
  }
</script>
<style scoped lang="stylus">
  @import "styl/_workbench.styl"
  @import '../../../assets/common.styl'
  table
    border-spacing 0
    border-collapse collapse
    background-color transparent
  .table
    border-collapse collapse
    width 100%
    max-width 100%
    margin-bottom 20px
  .table td
  .table th
    background-color $cf-white !important
  .table > thead > tr > th
  .table > tbody > tr > th
  .table > tfoot > tr > th
  .table > thead > tr > td
  .table > tbody > tr > td
  .table > tfoot > tr > td
    padding 4px 0
    line-height 1.42857143
    vertical-align top
  .table > thead > tr > th
    vertical-align bottom
    border-bottom 2px solid #ddd
  .table > caption + thead > tr:first-child > th
  .table > colgroup + thead > tr:first-child > th
  .table > thead:first-child > tr:first-child > th
  .table > caption + thead > tr:first-child > td
  .table > colgroup + thead > tr:first-child > td
  .table > thead:first-child > tr:first-child > td
    border-top 0
  .table > tbody + tbody
    border-top 2px solid #ddd
  .table .table
    background-color $cf-white
  .workbench-top10list
    float  left
    width calc(58% - 12px)
    margin  5px
    border  1px solid #e7e7eb
    height  405px
    background  $cf-white
    .workbench-title
      position  relative
      color $cf-gray2
      .top-choose
        position  absolute
        right  25px
        top  0
        span
          display  block
          float  left
          margin-left  10px
          min-width  28px
          height  40px
          cursor pointer
  .top_active
    color $c-main
    box-sizing  border-box
    border-bottom  3px solid $c-main
  .workbench-top10list-content
    font-size  12px
    position  relative
    height  100%
    padding  0 30px 0 70px
    .table
      table-layout fixed
      & last-of-type
         border-bottom none
      thead
        .crown
          position relative
        td
          height 67px
      tbody
        tr
          height  28px
          line-height  20px
          border-bottom  1px dashed $c-border1
          text-align  center
          color $cf-gray3
          & last-of-type
             border-bottom none
          .work_name
            overflow hidden
            width 100px
            text-overflow ellipsis
            white-space nowrap
            padding 4px 0px
            color $cf-gray2
            text-align right
          .num
            text-align left
            padding-left 15px
            color $cf-gray4
  .rank
    position  absolute
    left  48px
    top  77px
    width  22px
    p
      height  19px
      border-bottom  1px dashed $c-border1
      color  #989898
      padding  0
      margin  0
      text-align  center
  .icon-text
    width 40px
    height  50px
    line-height 50px
    font-size 50px
    text-align center
    padding: 12px 0px 15px 0px;
    margin: 0px auto;
    position absolute
    right -21px
    i
      display: inline-block;
      font-size: 16px;
      position: absolute;
      top: 23px;
      left: 17px;
      color: #fff;
  .workbench-top10list-cdr .top10list-cdr-icon
    color #88cd43
  .workbench-top10list-mail .top10list-mail-icon
    color #88cd43
  .workbench-top10list-im .top10list-im-icon
    color #88cd43
  .workbench-top10list-bus .top10list-bus-icon
    color #88cd43
  .workbench-top10list-content .rank tr
    border-bottom  none
    height 28px
  .workbench-top10list-content .rank tr .index
    font-size 18px
    color $c-pink
.common-styl
  width 20%
  float left
.pre
  position relative
.ppp
  overflow: hidden;
  text-overflow: ellipsis;
</style>
